<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jsx小练习</title>
</head>
<body>
  <!-- 准备好一个"容器" -->
  <div id="test"></div>

  <!-- 引入React核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 引入react-dom，用于支持react操作DOM -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 引入babel，用于将jsx转为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">
    /*
    * 一定注意区分：【js语句(代码)】与【js表达式】
    *     1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
    *         下面这些都是表达式：
    *             (1).a
    *             (2).a+b
    *             (3).demo(1)
    *             (4).arr.map()
    *             (5).function test() {}
    *     2.语句(代码)：
    *         下面这些都是语句(代码)：
    *             (1).if(){}
    *             (2).for(){}
    *             (3).switch(){case: xxxx}
    * */
    // 模拟一些数据
    const data = ['Angular', 'React', 'Vue']
    // const data1 = [<li>Angular</li>, <li>React</li>, <li>Vue</li>]
    // const data2 = {name1: 'Angular', name2: 'React', name3: 'Vue'}
    // 1.创建虚拟DOM
    const VDOM = (   /* 此处一定不要写引号，因为不是字符串 */
      <div>
        <h1>前端js框架列表</h1>
        <ul>
          {
            data.map((item, index) => {
              return <li key={index}>{item}</li>
            })
          }
        </ul>
      </div>
    )
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
  </script>
</body>
</html>
